<template>
  <h1 v-if="route.path==='/home/addSalary'">添加薪资</h1>
  <h1 v-else>修改薪资</h1>
  <el-form
    :model="form.data"
    :rules="rules"
    ref="ruleFormRef"
    :hide-required-asterisk="true"
    label-width="120px">

    <el-form-item label="基本工资" prop="basicSalary">
      <el-input v-model="form.data.basicSalary" placeholder="请输入基本工资" style="width: 218px;"/><div style="margin-left: 10px">元</div>
    </el-form-item>

    <el-form-item label="补贴" prop="allowance">
      <el-input v-model="form.data.allowance" placeholder="请输入补贴" style="width: 218px;"/><div style="margin-left: 10px">元</div>
    </el-form-item>

    <el-form-item>
      <el-button  type="primary" @click="onSubmit(ruleFormRef)" v-if="route.path==='/home/addSalary'">添加</el-button>
      <el-button v-else type="primary" @click="onSubmit(ruleFormRef)">修改</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>

</template>

<script lang="js" setup>
import { onMounted, reactive, ref, toRaw, toRefs, unref } from "vue";
import {
  addEmployee,
  deleteEmployeeById,
  getDepartmentNameId,
  getEmployeeOne,
  login,
  updateEmployee
} from "@/utils/api";
import { addSalary, getSalaryById, getSalaryTotalAndType, updateSalary } from "@/utils/salaryRequest";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import router from "@/router";

const route = useRoute();

const form = reactive({
  data: {
    "allowance": '',
    "basicSalary": '',
    "idDelete": "",
    "slarayId": '',
    "type": '',
  }
});


//表单校验规则
const rules = reactive({
  allowance: [
    { required: true, message: "请输入值", trigger: "blur" },
    { pattern:/^(0|([1-9][0-9]*))(\.[\d]{1,2})?$/, message: '保留两位小数', trigger: 'blur' }
  ],
  basicSalary: [
    { required: true, message: "请输入值", trigger: "blur" },
    { pattern: /^(0|([1-9][0-9]*))(\.[\d]{1,2})?$/, message: '保留两位小数', trigger: 'blur' }
  ],

});


const ruleFormRef = ref();


//重置
const reset = () => {
  form.data = {}
}

onMounted(() => {
  if (route.path !== '/home/addSalary'){
    //回显数据
    getUpdateSalaryDate()
  }
});

//回显要修改薪资的数据
const getUpdateSalaryDate = async () =>{
  //回显数据请求
  form.data.slarayId = route.query.id
  let res = await getSalaryById(route.query.id);
  form.data.allowance = Number((res.data.allowance/100).toFixed(2)) ;
  form.data.basicSalary = Number((res.data.basicSalary/100).toFixed(2)) ;
}


//发送添加请求
const addSalaryRequest = async (fromDate) => {
  fromDate.basicSalary *=100;
  fromDate.allowance *=100;
  console.log(fromDate);
  let res = await addSalary(fromDate);
  if (res.data) {
    ElMessage({
      type: "success",
      message: "添加成功"
    });
    router.push({
      path:'/home/salary'
    })
  }
};

//发送更新请求
const updateSalaryRequest  = async (fromDate)=>{
  fromDate.basicSalary *=100;
  fromDate.allowance *=100;
  let res = await updateSalary(form.data);
  if (res.data) {
    ElMessage({
      type: "success",
      message: "修改成功"
    });
    router.push({
      path:'/home/salary'
    })
  } else {
    ElMessage({
      type: "error",
      message: "修改失败"
    });
  }
}


//提交表单的回调
const onSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) {
      return false;
    } else {
      //发送请求
      if (route.path==='/home/addSalary'){
        addSalaryRequest(form.data);
      }else {
        ElMessageBox.confirm(
          "确定要修改吗?",
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(async () => {
            //发送修改的请求
            let res = await updateSalaryRequest(form.data);
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "取消修改"
            });
          });
      }
    }
  });
};

</script>


<style scoped>
</style>